<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon" href="http://124.221.62.120:3000/api/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="./config.js"></script>
    <link rel="stylesheet" href="./src/css/login/login.css">
    <!-- jq cdn -->
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./src/img_cursor/img_cursor.css">
    <style>
        body {
            background-color: rgb(60, 60, 70);
            /* 防止元素超出时出现滚动条 */
            overflow: hidden;
        }

        .a {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 300px;
            perspective: 100px;
        }

        .b {
            width: 1100px;
            height: 500px;
            position: absolute;
            border-radius: 50px;
            border: 35px #fff solid;
            /* 同时设置外阴影和内阴影，inset就是将外阴影转为内阴影 */
            box-shadow: 0 0 80px rgb(150, 20, 100),
                inset 0 0 80px rgb(150, 20, 100);
            /* 因为有20个span元素，所以每个元素平均分配到20分之一的时间，
                若持续时间为10s的话，元素的延迟就是0.5的倍数，以此类推
                持续时间越短，速度越快 */
            animation: a 7s ease-in-out infinite both;
            animation-delay: calc(var(--i)*.5s);
        }

        @keyframes a {
            0% {
                opacity: 0;
                transform: translateZ(-700px) scale(.2);
            }

            100% {
                /* 当元素离你越近的时候，透明度就越高 */
                opacity: 1;
                /* transformZ越大时，元素就离你越近，
                    scale是缩放，在元素离你越来越近的同时也越来越大 */
                transform: translateZ(200px) scale(1);
            }
        }

        #toast-top {
            position: fixed;
            z-index: 9999;
        }

        .toast-body {
            /* 透明度 */
            opacity: 8;
        }

        #admin {
            text-decoration: none;
            color: #fff;
        }
    </style>
</head>

<body>
    <button class="btn btn-success"><a href="./adminSrc/admin.html" id="admin">管理员入口</a></button>
    <div class="img_cursor"></div>
    <div id="toast-top" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="http://124.221.62.120:3000/api/favicon.ico" style="width: 30px;" class="rounded me-2"
                    alt="..." />
                <strong class="me-auto"></strong>
                <small>刚刚</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">Hello, world! This is a toast message.</div>
        </div>
    </div>
    <div class="a">
        <div class="b" style="--i:1"></div>
        <div class="b" style="--i:2"></div>
        <div class="b" style="--i:3"></div>
        <div class="b" style="--i:4"></div>
        <div class="b" style="--i:5"></div>
        <div class="b" style="--i:6"></div>
        <div class="b" style="--i:7"></div>
        <div class="b" style="--i:8"></div>
        <div class="b" style="--i:9"></div>
        <div class="b" style="--i:10"></div>
        <div class="b" style="--i:11"></div>
        <div class="b" style="--i:12"></div>
        <div class="b" style="--i:13"></div>
        <div class="b" style="--i:14"></div>
        <div class="b" style="--i:15"></div>
        <div class="b" style="--i:16"></div>
        <div class="b" style="--i:17"></div>
        <div class="b" style="--i:18"></div>
        <div class="b" style="--i:19"></div>
        <div class="b" style="--i:20"></div>
    </div>
    <section style="z-index: 999;" class="forms-section">

        <div class="forms">
            <div class="form-wrapper is-active"><button type="button" class="switcher switcher-login">登录 <span
                        class="underline"></span></button>
                <form class="form form-login">
                    <fieldset>
                        <legend>Please,
                            enter your email and password for login.</legend>
                        <div class="input-block"><label for="login-username">用户名</label><input id="login-username"
                                type="text" required></div>
                        <div class="input-block"><label for="login-password">密码</label><input id="login-password"
                                type="password" required></div>
                    </fieldset><button type="button" class="btn-login">登录</button>
                </form>
            </div>
            <div class="form-wrapper"><button type="button" class="switcher switcher-signup">注册 <span
                        class="underline"></span></button>
                <form class="form form-signup">
                    <fieldset>
                        <legend>Please,
                            enter your email,
                            password and password confirmation for sign up.</legend>
                        <div class="input-block"><label for="signup-username">用户名</label><input id="signup-username"
                                type="username" required></div>
                        <div class="input-block"><label for="signup-password">密码</label><input id="signup-password"
                                type="password" required></div>
                        <div class="input-block"><label for="signup-password-confirm">确认密码</label><input
                                id="signup-password-confirm" type="password" required></div>
                    </fieldset><button type="button" class="btn-signup">注册</button>
                </form>
            </div>
        </div>
    </section>
    <!-- 登录表单script -->
    <!-- //判断字符串中是否包含 单词 -->
    <script>
        function contains(str, word) {
            return str.indexOf(word) > -1;
        }
    </script>
    <script src="./src/js/login/login.js"></script>
    <script src="./src/js/login/login_handel.js"></script>
    <script src="./src/js/login/reg_handler.js"></script>
    <script src="./src/img_cursor/img_cursor.js"></script>
</body>

</html>